<template>
  <div>
    <el-dialog :title="title" v-model="open" width="1200px" append-to-body :before-close="cancel">
      <el-form ref="partyinfoRef" label-position="right" :model="form" :rules="rules" label-width="140px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="当事人名称" prop="partyName">
              <el-input v-model="form.partyName" placeholder="请输入当事人名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="法定代表人" prop="legalRepresentative">
              <el-input v-model="form.legalRepresentative" placeholder="请输入法定代表人姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="职务" prop="onsitePosition">
              <el-input v-model="form.onsitePosition" placeholder="请输入职务" />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="地址" :rules="rules.addressObj" prop="addressObj">
              <locationSelect v-model="form.addressObj" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="统一社会信用代码" prop="creditCode">
              <el-input v-model="form.creditCode" placeholder="请输入统一社会信用代码" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="营业执照类型" prop="businessType">
              <el-input v-model="form.businessType" placeholder="请输入营业执照类型" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮政编码" prop="postalCode">
              <el-input v-model="form.postalCode" placeholder="请输入邮政编码" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="电子邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入电子邮箱" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="传真号码" prop="faxNumber">
              <el-input v-model="form.faxNumber" placeholder="请输入传真号码" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="现场负责人姓名" prop="onsiteName">
              <el-input v-model="form.onsiteName" placeholder="请输入现场负责人姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出生日期" prop="dateOfBirth">
              <el-date-picker
                clearable
                v-model="form.dateOfBirth"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择出生日期"
                style="width: 100%"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别" prop="gender">
              <el-select v-model="form.gender" placeholder="请选择性别" clearable style="width: 100%">
                <el-option
                  v-for="item in sys_user_sex"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证号" prop="idNumber">
              <el-input v-model="form.idNumber" placeholder="请输入身份证号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="现场负责人电话" prop="onsitePhone">
              <el-input v-model="form.onsitePhone" placeholder="请输入现场负责人电话" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="现场负责人工作单位" prop="workUnit">
              <el-input v-model="form.workUnit" placeholder="请输入现场负责人工作单位" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="职务" prop="legalPosition">
              <el-input v-model="form.legalPosition" placeholder="请输入职务" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">提 交</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, getCurrentInstance, computed, watch } from 'vue'
import { getPartyinfo, addPartyinfo, updatePartyinfo } from '@/api/partyinfo/index'
import locationSelect from '@/components/locationSelect/index.vue'
import { commonRules } from '@/components/DynamicForm/config'

const { proxy } = getCurrentInstance()

const props = defineProps({
  id: {
    type: [String, Number],
    default: undefined,
  },
  value: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '',
  },
})
const emit = defineEmits(['update:value', 'getList'])
const open = computed({
  get: () => props.value,
  set: (val: boolean) => emit('update:value', val),
})
const { sys_user_sex } = proxy.useDict('sys_user_sex')
const partyinfoRef = ref<any>()
const form = ref<any>({
  addressObj: {
    streetOfPhotoLocation: undefined,
    photoLocation: undefined,
  },
})
// 自定义校验器：检查拍摄地点是否完整
const validateLocation = (rule: any, value: any, callback: any) => {
  if (!value || !value.streetOfPhotoLocation || !value.photoLocation) {
    callback(new Error('请选择地址'))
  } else {
    callback()
  }
}
const rules = {
  partyName: [{ required: true, message: '当事人名称不能为空', trigger: ['blur', 'change'] }],
  legalRepresentative: [{ required: true, message: '法定代表人姓名不能为空', trigger: ['blur', 'change'] }],
  addressObj: [{ required: true, validator: validateLocation, trigger: ['blur', 'change'] }],
  legalPosition: [{ required: true, message: '法定代表人职务不能为空', trigger: ['blur', 'change'] }],
  creditCode: [commonRules.creditCode],
  postalCode: [commonRules.postCode],
  phone: [commonRules.phone],
  onsiteName: [{ required: true, message: '现场负责人姓名不能为空', trigger: ['blur', 'change'] }],
  idNumber: [commonRules.identityCard18],
  onsitePhone: [commonRules.phone],
  email: [commonRules.email],
}

watch(
  () => props.id,
  newVal => {
    if (newVal) {
      getInfo()
    }
  },
  { immediate: true }
)

function getInfo() {
  getPartyinfo(props.id).then(response => {
    form.value = response.data
    form.value.addressObj = {
      photoLocation: form.value.address,
      streetOfPhotoLocation: form.value.streetOfCompanyAddress,
    }
  })
}

// 表单重置
function reset() {
  for (const key in form.value) {
    form.value[key] = undefined
  }
  proxy.resetForm('partyinfoRef')
  console.log(form.value)
}
// 取消按钮
function cancel() {
  reset()
  nextTick(() => {
    open.value = false
  })
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs['partyinfoRef'].validate(valid => {
    if (valid) {
      const params = JSON.parse(JSON.stringify(form.value))
      params.address = form.value.addressObj.photoLocation
      params.streetOfCompanyAddress = form.value.addressObj.streetOfPhotoLocation
      if (params.id != null) {
        updatePartyinfo(params).then(response => {
          proxy.$modal.msgSuccess('修改成功')
          reset()
          nextTick(() => {
            open.value = false
            emit('getList')
          })
        })
      } else {
        addPartyinfo(params).then(response => {
          proxy.$modal.msgSuccess('新增成功')
          reset()
          nextTick(() => {
            open.value = false
            emit('getList', params)
          })
        })
      }
    }
  })
}
</script>

<style scoped></style>
